<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <title>书笺小驿-购物车</title>
    <link rel="stylesheet" href="css/shoppingCar.css">
</head>
<body style="margin: 0 auto">
<div id="app">
    <el-container>
        <el-header height="34px" style="padding: 0">
            <div style="background-color: #f9f9f9; width: 1200px;margin: 0 auto; position: relative;line-height: 0px; ">
                <div style="margin: 10px ;line-height: 0px">
                    <a class="a1" href="">登录,成为会员</a>
                    <el-divider direction="vertical"></el-divider>
                    <a class="a1" href="">购物车</a>
                    <el-divider direction="vertical"></el-divider>
                    <a class="a1" href="">我的订单</a>
                    <el-divider direction="vertical"></el-divider>
                    <a class="a1" href="">我的小驿</a>
                    <el-divider direction="vertical"></el-divider>
                    <a class="a1" href="">客服</a>
                </div>
            </div>
        </el-header>

        <div class="logo_line">
            <div class="step_bar">
                <div class="shopping_procedure">
                    <ul class="Steps">
                        <li class="active">我的购物车</li>
                        <li class="">填写订单</li>
                        <li class="">完成订单</li>
                    </ul>
                </div>
                <div class="logo">
                    <a href="https://www.baidu.com">
                        <img src="http://shopping.dangdang.com/shoppingcart/images/dd_logo.jpg?v=20220225" alt=""
                             class="shoppingCar_img">
                    </a>
                </div>
            </div>
        </div>


        <div class="add_line">
            <div class="address_bar">
                <div class="address">
                    <span>配送地址:</span>
                    <div class="select_add">
                        <el-cascader
                                v-model="value"
                                :options="options"
                                @change="handleChange"
                        >
                        </el-cascader>
                    </div>
                </div>
            </div>
        </div>


        <div>
            <el-table class="buyCar_bar"
                      :data="productArr"
            >
                <el-table-column prop="select_id" label="选择" width="53">
                    <el-checkbox></el-checkbox>
                </el-table-column>
                <el-table-column prop="shoppingImg" label="" width="102">
                    <template slot-scope="scope">
                        <el-popover
                                placement="right-end"
                                width="200"
                                trigger="hover"
                        >
                            <img :src="scope.row.shoppingImg" style="width: 100%" alt="">
                            <img :src="scope.row.shoppingImg" style="width: 100%" alt="" slot="reference">
                        </el-popover>
                    </template>
                </el-table-column>
                <el-table-column prop="shoppingText" label="商品信息" width="326"></el-table-column>
                <el-table-column prop="price" label="单价(元)" width="110"></el-table-column>
                <el-table-column prop="num" label="数量" width="160" align="center">

                    <template slot-scope="scope">
                        <el-input-number size="mini" v-model="scope.row.num" ange="handleChange" :min="1" :max="10"
                                         label="描述文字"></el-input-number>
                    </template>

                </el-table-column>
                <el-table-column prop="sumPrice" label="金额(元)" width="130" align="center"></el-table-column>
                <el-table-column label="操作" width="60"></el-table-column>
            </el-table>


            <!--<table>
                <tr>
                    <th>选择</th>
                    <th>商品信息</th>
                    <th>单价(元)</th>
                    <th>数量</th>
                    <th>金额(元)</th>
                    <th>操作</th>
                </tr>
                <tr v-for="p in productArr">
                    <td><el-checkbox ></el-checkbox></td>
                    <td><img :src="p.shoppingImg" alt="">{{p.shoppingText}}</td>
                    <td>{{p.price}}</td>
                    <td><el-input-number size="mini" v-model="p.num"></el-input-number></td>
                    <td>{{p.sumPrice}}</td>
                    <td></td>
                </tr>
            </table>-->
        </div>
        <div style="margin: 0 auto">
            <div style="background-color: red ;width: 1000px ;height: 30px;position: relative"></div>
        </div>
    </el-container>

</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                value: [],
                options: [],
                productArr: [],
                visible: true
            }
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },

        },
        created: function () {
            //获取商品
            axios.get("/product/car/select").then(function (response) {
                v.productArr = response.data;
            })
        }

    })
</script>
</html>